<template>
  <div class="body">
    <div style="display: flex;">
      <!-- 714晚上极限拯救队友代码 -->
     <!--   {{departmentSelect}}
        {{teacherSelect}}
 -->
      <div class="btn-left checked-area" style="width: 50%; border-right: 1px solid #F2F4FA;padding: 24px;">
        <div>
          <div class="btn-tit">部门</div>
          <div class="tag-btn" style="display: flex;margin: 10px 0 20px 0;flex-wrap: wrap;">
            <div class="item" v-for="(item,index) in getDepartmentList" :key="item.id">
              <span class="label">{{ item.nickName }} ( {{ item.personCount }} )</span>
            </div>
            <div v-if="!getDepartmentList.length" style="color:#999999">暂无部门</div>
          </div>
          <div class="btn-tit">人员</div>
          <div class="tag-btn" style="display: flex;margin-top: 10px;flex-wrap: wrap;">
            <div class="item" v-for="item in selectedTeacherList" :key="item.userId">
              <span class="label">{{ item.userName }}</span>
              <a-icon class="icon" type="close" @click="delCheckedEvt(item.userId, 'T', item.departmentId)" />
            </div>
            <div v-if="!selectedTeacherList.length" style="color:#999999">暂无部门</div>
          </div>
        </div>
      </div>
      <div style="padding: 24px;">
        <a-tabs default-active-key="2">
          <a-tab-pane key="1">
            <span slot="tab">部门</span>
            <a-tree checkable v-model="departmentSelect" :tree-data="departemntList"
              :replaceFields="{
                children:'child',
                title:'name',
                key:'id'
              }" />
          </a-tab-pane>
          <a-tab-pane key="2">
            <span slot="tab">人员</span>
            <a-tree checkable v-model="teacherSelect" :tree-data="teacherList" @check="onTeacherChange"></a-tree>
          </a-tab-pane>
        </a-tabs>
      </div>
    </div>
  </div>
</template>

<script>
  import {
    tree,
    allTeacherAndTree
  } from '@/api/tree'
  export default {
    data() {
      return {
        departmentSelect: [],
        departemntList: [],

        teacherList: [],
        teacherSelect: [],

        selectedTeacherList: [],
      }
    },
    computed: {
      getDepartmentList() {
        const readNodes = (nodes = [], arr = []) => {
          for (let item of nodes) {
            if (this.departmentSelect.includes(item.id)) {
              arr.push(item)
            }
            if (item.child?.length) readNodes(item.child, arr)
          }
          return arr
        }
        return readNodes(this.departemntList)
      }
    },
    created() {
      // 获取树数据
      tree({ parentId: 0}).then(response => {
        this.departemntList = response.data.list
        allTeacherAndTree().then(response => {
          this.handleTreeData(response.data.departmentTree)
          // 添加暂无部门的数据
          let tempList = response.data.departmentTree
          let noDepartmentTeacher = []
          response.data.personList.forEach(item => {
            item.title = item.name
            item.key = item.userId
            noDepartmentTeacher.push(item)
          })
          tempList.push({
            code: "",
            id: '',
            name: "暂未分配部门人员",
            nickName: "暂未分配部门人员",
            title: '暂未分配部门人员',
            key: '',
            parentId: '',
            personCount: noDepartmentTeacher.length,
            type: '',
            children: noDepartmentTeacher
          })
          this.teacherList = tempList
        })
      })
    },
    methods: {

      delCheckedEvt(userId, type) {
        if (type === "T") {
          const result = this.getParentIds(this.teacherList, userId)
             console.log("mmmm",result)
          this.selectedTeacherList = this.selectedTeacherList.filter(
            (v) => v.userId !== userId
          );
          this.checkedTeacherList = this.checkedTeacherList.filter(
            (v) => v !== userId && !result.includes(v)
          )
        } 
      },

      //查找所有父节点  返回id集合
      getParentIds(list, id) {
        for (let i in list) {
          if (list[i].id === id || list[i].userId === id) {
            return [];
          }
          if (list[i].children) {
            let node = this.getParentIds(list[i].children, id);
            if (node) {
              return node.concat(list[i].id);
            }
          }
        }
      },

      handleTreeData(data) {
        for (let i = 0; i < data.length; i++) {
          const item = data[i];
          const {
            id,
            userId,
            name,
            child,
            personList
          } = item;
          item.title = name;
          item.key = id || userId;
          item.children = child && child.length ? child : personList;
          if ((child && child.length) || (personList && personList.length)) {
            this.handleTreeData(child && child.length ? child : personList);
          }
        }
      },

      onTeacherChange(checkedValues, checkedNodes) {
        this.teacherSelect = checkedValues;
        let arr = [];
        checkedNodes.checkedNodesPositions.forEach((item) => {
          const {
            name,
            userId,
            userIndex,
            departmentId,
            child,
            personList
          } =
          item.node.data.props;
          if (!child || !personList) {
            arr.push({
              userName: name,
              userId,
              userIndex,
              departmentId,
              userType: "T",
            });
          }
        });
        this.selectedTeacherList = arr;
      }







    }
  }
</script>
<style scoped="scoped" lang="scss">
  .red {
    color: red;
  }

  .yellow {
    color: #FF8948;
  }

  .body {
    padding: 24px 0;
  }

  ::v-deep .ant-tabs-nav-container {
    margin-left: 24px;
  }

  .day-statistics {
    margin: 0 24px;

    .day-form {
      display: flex;
      flex-wrap: wrap;

      .day-form-tit {
        white-space: nowrap;
      }

      .form-item {
        display: flex;
        align-items: center;
        margin: 0 0 24px 0;
        width: 260px;
        margin-right: 20px;
      }

      .day-form-in {
        width: 220px;
      }

      .day-form-btn {
        margin-right: 10px;
      }
    }
  }



  .checked-area {
    margin: 12px 0;

    .item {
      display: inline-flex;
      align-items: center;
      height: 32px;
      text-align: center;
      line-height: 32px;
      background: #f2f4f5;
      margin: 6px 12px;
      margin-left: 0;
      border-radius: 4px;
      padding: 0 12px;
      user-select: none;
      color: #999;

      &:hover {
        color: #666;
        background: #e5e5e5;
      }

      .label {
        display: inline-block;
        max-width: 120px;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
        color: #333;
        font-size: 14px;
        font-weight: 400;
        margin-right: 8px;
      }

      .icon {
        cursor: pointer;
      }
    }
  }
</style>
